<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 120px;
			}
		</style>
		<script type="text/javascript">
			function showImgs() {
				// 获取指定id的控件对象
				// 获取dom中一个指定id的图片对象
				var img1 = document.getElementById("img1");  
				console.info(img1);
				// 获取当前空间的 指定属性的值
				// 获取当前对象的指定属性的值
				var strSrc = img1.getAttribute("src");
				// 将获取对象和获取对象的属性值合并的写法
				var strAlt = document.getElementById("img1").getAttribute("alt");
				console.info(strAlt);
				// 将获取的值使用js赋值给控件 showValue
				document.getElementById("showValue").value = strSrc;
				// 更改imgq1对象的 src属性的值
				//img1.src = "imgs/logo-2x.png";
				img1.setAttribute("src","imgs/logo-2x.png"); // 推荐使用这种方式
			}
		</script>
	</head>

	<body>
		<div>
			<img id="img1" alt="这是一个用于显示的图片" src="imgs/bg1.jpg" />
		</div>
		<p>获取到的值为：<input type="text" id="showValue" size="65" /></p>
		<p><input type="button" name="btn" value="更换图片" onclick="showImgs()" /></p>
	</body>

</html>